<template>
	<div class="">
		<pop-layout :show.sync="show" :layoutstyle="layoutStyle">
			<template #title>
				<div class="font30 bold">可替换菜品：<span class="color33">【共{{mapItem.items&& mapItem.items.length }}份】</span></div>
			</template>
			<!-- <template #detail>
				<div class="font24 line15">{{ getPackageDetails(mapItem) }}</div>
			</template> -->
			<template #content>
				<div class="classifyList">
					<div class="filterList marT40" v-for="(item,index) in mapItem.items" :key="index">
						<image-com :src="baseURL + item.mainImageUrl" :imgStyle="{width: '2.75rem',height: '2.75rem'}"></image-com>
						<div class="filterItem">
							<div class="font28 bold line15" style="display: flex;"><span class="itemText">{{item.productName}}</span><span class="colorP marL40">{{ dishTitleAppend(item) }}</span></div>
							<div class="font24 line15">{{ buildDesc(item) }}</div>
						</div>
						<div class="addSubtWrapper">
							<div class="addSubt">
								<span class="operate" @click="decrease(item, mapItem.items, index)">-</span>
								<span class="much">{{item.itemCount}}</span>
								<span class="operate" @click="increase(item, mapItem.items, index)">+</span>
							</div>
						</div>
					</div>
					<div class="padTB24 font24 borderB">
						请选择<span class="colorP">{{ limitCount }}</span>款菜品，当前已选择<span class="colorP">{{ selectedCount }}</span>款
					</div>
					<!-- <div class="addSubtWrapper font30 bold padTB24">
						<div class="">
							加价合计
						</div>
						<div class="">
							¥ 2.00
						</div>
					</div> -->
				</div>
				</template>
			<template #footer>
				<div class="replaceBottomBox">
					<div class="btn cancelBtn" @click="close">取消</div>
					<div class="btn surnBtn" v-if="canFinish" @click="finish">完成</div>
					<div class="btn surnBtn disable" v-else>完成</div>
				</div>
			</template>
		</pop-layout>
	</div>
</template>

<script>
import imageCom from "@/components/common/imageCom.vue";
import { baseURL } from "@/api/config";
import popLayout from "@/components/common/popLayout.vue"
import { singleItemCalculate } from "@/utils/cartFn";
import _cloneDeep from "lodash/cloneDeep"
export default {
	components:{
		popLayout,
		imageCom
	},
	computed:{
		hasItem() {
			let res = Object.keys(this.mapItem).length > 0 ? true : false;
			return res;
		},
		limitCount() {
			// 拿package.count
			if (this.mapItem.count > 0) {
				return this.mapItem.count;
			} else {
				return 0;
			}
		},
		selectedCount() {
			let count = 0;
			if (this.mapItem.items) {
				this.mapItem.items.forEach((item) => {
				count += item.itemCount;
				});
			}
			return count;
		},
		canFinish() {
			let res =
				this.selectedCount >= 1 && this.selectedCount <= this.limitCount
				? true
				: false;
			return res;
		},
	},
	data(){
		return{
			layoutStyle: 'replaceBox',
			baseURL,
			show: false,
			allParams: {},
			mapItem: {},
		}
	},
	methods: {
		showPopup(params) {
			this.allParams = params;
			this.mapItem = _cloneDeep(params.item);
			//console.log(this.mapItem)
			this.show = true;
		},
		// cloneDeep(obj) {
		// 	let copyObj = JSON.parse(JSON.stringify(obj));
		// 	return copyObj;
		// },
		close() {
			this.show = false;
		},
		singleItemCalculate,
		/**
		 * @description 描述菜品，包括加价或需要选择做法
		 */
		dishTitleAppend(sitem) {
			let desc = "";
			let { type } = sitem;
			if (type != 5) return desc;
			if (this.singleMethodCanFinish(sitem) == false) {
				desc = "需要选择做法";
				return desc;
			} else if (sitem.itemCount > 0) {
				let singlePrice = this.singleItemCalculate(sitem, false);
				singlePrice > 0 && (desc = `+${singlePrice}`);
				return desc;
			} else {
				return desc;
			}
		},
		/**
		 * @description 单组菜品验证
		 */
		singleMethodCanFinish(list) {
			let res = true;
			list.foodGroups.forEach((f) => {
				let limit = f.count;
				let selected = 0;
				f.items.forEach((fitem) => {
				fitem.isDefault == true && selected++;
				});
				selected != limit && (res = false);
			});
			return res;
		},
		buildDesc(item) {
			let str = "";
			let { type } = item;
			if (type == 5) {
				if (item.foodGroups.length == 0) return str;
				let arr = [];
				item.foodGroups.forEach((sitem) => {
				sitem.items.forEach((i) => {
					i.isDefault == true && arr.push(`${i.itemTitle}`);
				});
				});
				str = arr.join("+");
				return str;
			}
			let unitName = item?.unit?.unitName ?? "";
			return str + `x${item.itemCount}${unitName}`;
		},
		// -------------------------操作----------------------
		decrease(sitem, list, sidx) {
			let cur = sitem.itemCount;
			cur = cur - 1;
			if (sitem.type == 5) {
				let dishes = list.filter((item) => {
					return item.productId == sitem.productId && item != sitem;
				});
				if (dishes.length > 0) {
					list.splice(sidx, 1);
					return;
				}
			}
			if (cur >= 0) {
				sitem.itemCount = cur;
			}
		},
		increase(sitem, list, idx) {
			if (sitem.type == 5 && sitem.itemCount != 0) {
				let newItem = JSON.parse(JSON.stringify(sitem));
				newItem.itemCount = 1;
				list.splice(idx, 0, newItem);
			} else {
				sitem.itemCount++;
			}
		},
		finish() {
			let params = { ...this.allParams, mapItem: this.mapItem };
			this.allParams.cb(params);
			this.show = false;
		},
	},
}
</script>

<style lang="scss">
	// 可替换
	.replaceBox{ z-index: 24; top: auto; left:0; width: 100%; bottom: 0; border-radius: 0.5rem 0.5rem 0 0; text-align: left; padding: 0.75rem; transform: translate(0,0);box-sizing: border-box;
		.classifyList{ padding-bottom: 50px; max-height: calc(80vh - 60px); overflow-y: scroll; flex: 1; -webkit-flex: 1; box-sizing: border-box;
		}
		.filterList{ position: relative; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;  align-content: flex-start; -webkit-align-content: flex-start; background-color: #f0f0f0; padding: 3%; border-radius: 0.5rem;
			.photo{ display: block; text-align: center; overflow: hidden; width: 2.75rem; height: 2.75rem; border-radius: 0.3rem;}
			.filterItem{ margin: 0 3%; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
			.itemText{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;
				.price{ width: 5rem;}
			}
			}
			&+.filterList:after{content: " "; position: absolute; left: 0.4rem; top: 0; right: 0.4rem; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		}
		.addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.total{ width: 4rem;}
			.addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid $mainColor; border-radius: 4px;
				&:last-child{ border: 1px solid $mainColor; background-image: linear-gradient(to right,$mainColor,#ffae44); color: #fff;}
			}
			.much{ width: calc(100% - 2rem - 2px); background-color: transparent; height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
		.replaceBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; background-color: #fff;
			.btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
			.cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
			.surnBtn{ flex: 1; text-align: center; color: #333; margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);
				&.disable{
					background-image: none;
					color: #fff;
					background: #929292;
				}
			}
		}
	}
</style>
